<template>
  <div class="companyProfile">
    <div class="carousel">
      <el-carousel interval="5000">
        <el-carousel-item class="el-carousel-item" v-for="(item, index) in swiperData" :key="index">
          <img :src="$t(`messages.companyProfile.swiperList[${index}].image`)" alt="" srcset="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="content">
      <div class="left">
        <div class="title">{{ $t(`messages.companyProfile.contentTitle`) }}</div>
        <div class="size contentSize">
          {{ $t(`messages.companyProfile.contentSize`) }}
        </div>
      </div>
      <div class="middle">
        <ul>
          <li v-for="(item, index) in introduceList" :key="index">
            <div class="title2">{{ $t(`messages.companyProfile.introduce[${index}].title`) }}</div>
            <div class="size">{{ $t(`messages.companyProfile.introduce[${index}].detils`) }}</div>
          </li>
        </ul>
      </div>
      <div class="rigth">
        <img src="../../assets/image/companyProfile/1.png" alt="" srcset="" />
      </div>
    </div>
    <div class="footNavigation">
      <div
        class="imgBox"
        v-for="(item, index) in navgation"
        :key="index"
        @click="goNavigationFn(index)"
      >
        <div class="navigation center">
          {{ $t(`messages.companyProfile.footimageList[${index}].pathName`) }}
        </div>
        <img :src="$t(`messages.companyProfile.footimageList[${index}].image`)" alt="" srcset="" />
      </div>
    </div>
  </div>
</template>

<script setup>

import { enterpriseSlideshow, enterpriseIntroduce, footimage } from '@/http/api/enterprise.js'
import Zh from '@/assets/i18n/langs/zh.js'
import En from '@/assets/i18n/langs/en.js'
import { toRaw, ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const goNavigationFn = (index) => {
  router.push(navgation.value[index].path)

}
let pageData = reactive({
  page: 1,
  size: 50
})
let swiperData = ref([])
const getData = async () => {
  let res = await enterpriseSlideshow(pageData)
  Zh.messages.companyProfile.swiperList = res.res.map((item) => {
    return {
      title: item.title,
      image: item.image
    }
  })
  En.messages.companyProfile.swiperList = res.res.map((item) => {
    return {
      title: item.title,
      image: item.image
    }
  })

  swiperData.value = res.res.map((item) => {
    return {
      ...item,
      type: 0
    }
  })
}
let introduceList = ref([])
const enterpriseIntroduceFn = async () => {
  const res = await enterpriseIntroduce(pageData)
  introduceList.value = res.res
  Zh.messages.companyProfile.introduce = res.res.map((item) => {
    return {
      title: item.titleZh,
      detils: item.detilsZh
    }
  })
  En.messages.companyProfile.introduce = res.res.map((item) => {
    return {
      title: item.titleEn,
      detils: item.detilsEn
    }
  })
}
let navgation = ref([])
const getfootimage = async () => {
  let res = await footimage(pageData)
  Zh.messages.companyProfile.footimageList = res.res.map((item) => {
    return {
      pathName: item.pathNameZh,
      image: item.imageZh
    }
  })
  En.messages.companyProfile.footimageList = res.res.map((item) => {
    return {
      pathName: item.pathNameEn,
      image: item.imageEn
    }
  })
  navgation.value = res.res
}
onMounted(() => {
  getData()
  enterpriseIntroduceFn()
  getfootimage()
})
</script>

<style lang="scss" scoped>
::v-deep .el-carousel__container {
  height: 900px;
}
.content {
  background-image: linear-gradient(#000000, #121617 90%);
  height: 1000px;
  width: 100%;
}
.contentSize {
  width: 650px !important;
}
.el-carousel-item {
  img {
    width: 100%;
    height: 100%;
  }
}
.content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title {
  font-size: 46px;
  font-weight: bold;
  color: #ffdd00;
}
.title2 {
  font-size: 38px;
  font-weight: bold;
  color: #ffdd00;
}
.left {
  margin-left: 50px;
}
.middle {
  margin-left: 30px;
  width: 550px;
}
.size {
  width: 500px;
  color: #ffffff;
  white-space: pre-wrap; /* 保留空白符序列，但是当到达容器边界时进行换行 */
  overflow-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
  word-break: break-all; /* 允许在任意字符间断开（用于CJK文字等） */
}
.rigth {
  width: 550px;
  height: 100%;

  img {
    width: 100%;
    height: 100%;
  }
}
.footNavigation {
  display: flex;
  height: 900px;
  background: #121617;
  .imgBox {
    flex: 2;
    height: 100%;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .imgBox:hover {
    transform: scale(1.2);
  }
}
.navigation {
  font-size: 38px;
  font-weight: bold;
  color: #ffdd00;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>